<!-- 全链路追踪视图组件 -->
<template>
  <div class="full-chain-trace">
    <div class="trace-header">
      <h3 class="trace-title">
        <el-icon><Connection /></el-icon>
        全链路追踪视图
      </h3>
      <div class="trace-controls">
        <el-button size="small" @click="refreshTrace">
          <el-icon><Refresh /></el-icon>
          刷新
        </el-button>
        <el-button size="small" @click="exportTrace">
          <el-icon><Download /></el-icon>
          导出
        </el-button>
      </div>
    </div>

    <div class="trace-content">
      <!-- 状态流程图 -->
      <div class="flow-diagram">
        <div class="flow-step" 
             v-for="step in traceSteps" 
             :key="step.id"
             :class="['step-' + step.status]">
          <div class="step-icon">
            <el-icon>
              <component :is="step.icon" />
            </el-icon>
          </div>
          <div class="step-info">
            <div class="step-name">{{ step.name }}</div>
            <div class="step-time">{{ step.time }}ms</div>
            <div class="step-status">{{ step.statusText }}</div>
          </div>
          <div class="step-arrow" v-if="step.id < traceSteps.length">
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 详细日志 -->
      <div class="trace-logs">
        <div class="logs-header">
          <span>执行日志</span>
          <el-input 
            v-model="logFilter" 
            placeholder="过滤日志..." 
            size="small" 
            style="width: 20vw;"
            clearable>
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="logs-content">
          <div class="log-item" 
               v-for="log in filteredLogs" 
               :key="log.id"
               :class="['log-' + log.level]">
            <span class="log-time">{{ log.timestamp }}</span>
            <span class="log-level">{{ log.level.toUpperCase() }}</span>
            <span class="log-message">{{ log.message }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  Connection, 
  Refresh, 
  Download, 
  ArrowRight, 
  Search,
  DataBoard,
  Monitor,
  Tools,
  CircleCheck
} from '@element-plus/icons-vue'

// 追踪步骤数据
const traceSteps = ref([
  {
    id: 1,
    name: '数据汇聚',
    icon: 'DataBoard',
    status: 'success',
    statusText: '已完成',
    time: 150
  },
  {
    id: 2,
    name: '数据分析',
    icon: 'Monitor',
    status: 'running',
    statusText: '处理中',
    time: 320
  },
  {
    id: 3,
    name: '索引检索',
    icon: 'Tools',
    status: 'pending',
    statusText: '等待中',
    time: 0
  },
  {
    id: 4,
    name: '结果输出',
    icon: 'CircleCheck',
    status: 'pending',
    statusText: '等待中',
    time: 0
  }
])

// 日志数据
const logs = ref([
  {
    id: 1,
    timestamp: '2024-01-15 14:30:25',
    level: 'info',
    message: '开始数据汇聚任务，处理 1,234 条记录'
  },
  {
    id: 2,
    timestamp: '2024-01-15 14:30:26',
    level: 'success',
    message: '数据汇聚完成，耗时 150ms'
  },
  {
    id: 3,
    timestamp: '2024-01-15 14:30:27',
    level: 'info',
    message: '启动数据分析引擎'
  },
  {
    id: 4,
    timestamp: '2024-01-15 14:30:28',
    level: 'warning',
    message: '检测到异常数据点 12 个，正在处理'
  },
  {
    id: 5,
    timestamp: '2024-01-15 14:30:29',
    level: 'info',
    message: '数据分析进度：45%'
  }
])

// 日志过滤
const logFilter = ref('')
const filteredLogs = computed(() => {
  if (!logFilter.value) return logs.value
  return logs.value.filter(log => 
    log.message.toLowerCase().includes(logFilter.value.toLowerCase())
  )
})

// 刷新追踪
const refreshTrace = () => {
  // 模拟刷新数据
  console.log('刷新全链路追踪数据')
}

// 导出追踪
const exportTrace = () => {
  // 模拟导出功能
  console.log('导出追踪数据')
}

onMounted(() => {
  // 模拟实时更新
  setInterval(() => {
    if (traceSteps.value[1].status === 'running') {
      const progress = Math.min(100, Math.random() * 100)
      if (progress > 90) {
        traceSteps.value[1].status = 'success'
        traceSteps.value[1].statusText = '已完成'
        traceSteps.value[2].status = 'running' 
        traceSteps.value[2].statusText = '处理中'
      }
    }
  }, 3000)
})
</script>

<style scoped>
.full-chain-trace {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #263445;
  border-radius: 0.8vh;
  overflow: hidden;
}

.trace-header {
  padding: 1.5vh 2vw;
  background: #1f2d3d;
  border-bottom: 1px solid #2d3a4b;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.trace-title {
  margin: 0;
  font-size: 1.1rem;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.trace-controls {
  display: flex;
  gap: 1vw;
}

.trace-content {
  flex: 1;
  padding: 2vh;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  overflow: hidden;
}

.flow-diagram {
  background: #1f2d3d;
  border-radius: 0.6vh;
  padding: 2vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

.flow-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.step-icon {
  width: 4vh;
  height: 4vh;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1vh;
  font-size: 1.2rem;
}

.step-success .step-icon {
  background: #67C23A;
  color: #ffffff;
}

.step-running .step-icon {
  background: #409EFF;
  color: #ffffff;
  animation: pulse 2s infinite;
}

.step-pending .step-icon {
  background: #2d3a4b;
  color: #8591a3;
}

.step-info {
  text-align: center;
}

.step-name {
  font-size: 0.9rem;
  color: #bfcbd9;
  margin-bottom: 0.5vh;
}

.step-time {
  font-size: 0.8rem;
  color: #8591a3;
  margin-bottom: 0.3vh;
}

.step-status {
  font-size: 0.7rem;
  padding: 0.2vh 0.8vw;
  border-radius: 1vh;
}

.step-success .step-status {
  background: rgba(103, 194, 58, 0.2);
  color: #67C23A;
}

.step-running .step-status {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

.step-pending .step-status {
  background: rgba(133, 145, 163, 0.2);
  color: #8591a3;
}

.step-arrow {
  position: absolute;
  right: -1.5vw;
  font-size: 1.2rem;
  color: #8591a3;
}

.trace-logs {
  flex: 1;
  background: #1f2d3d;
  border-radius: 0.6vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.logs-header {
  padding: 1.5vh 2vw;
  border-bottom: 1px solid #2d3a4b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #bfcbd9;
  font-weight: 600;
}

.logs-content {
  flex: 1;
  overflow-y: auto;
  padding: 1vh;
}

.log-item {
  display: flex;
  align-items: center;
  gap: 1vw;
  padding: 0.8vh 1vw;
  border-radius: 0.4vh;
  margin-bottom: 0.5vh;
  font-size: 0.8rem;
}

.log-item:hover {
  background: rgba(64, 158, 255, 0.1);
}

.log-time {
  color: #8591a3;
  min-width: 12vw;
}

.log-level {
  font-weight: 600;
  min-width: 5vw;
  text-align: center;
  padding: 0.2vh 0.8vw;
  border-radius: 0.3vh;
  font-size: 0.7rem;
}

.log-info .log-level {
  background: rgba(64, 158, 255, 0.2);
  color: #409EFF;
}

.log-success .log-level {
  background: rgba(103, 194, 58, 0.2);
  color: #67C23A;
}

.log-warning .log-level {
  background: rgba(230, 162, 60, 0.2);
  color: #E6A23C;
}

.log-error .log-level {
  background: rgba(245, 108, 108, 0.2);
  color: #F56C6C;
}

.log-message {
  color: #bfcbd9;
  flex: 1;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
</style>